import * as BABYLON from "babylonjs";

export class Particles3D {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.ArcRotateCamera;
    private _light: BABYLON.Light;
    constructor(canvasId: string) {
        this._canvas = document.getElementById(canvasId) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
        this._scene = {} as BABYLON.Scene;
        this._camera = {} as BABYLON.ArcRotateCamera;
        this._light = {} as BABYLON.Light;
    }

    createScene(): void {
        this._scene = new BABYLON.Scene(this._engine);
        this._scene.ambientColor = new BABYLON.Color3(1, 1, 1); // 设置背景颜色
        this._camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 2, 20, new BABYLON.Vector3(0, 0, 0), this._scene);
        this._camera.attachControl(this._canvas, true);
        this._light = new BABYLON.HemisphericLight('mylight', new BABYLON.Vector3(0, 1, 0), this._scene);
    }

    createShape() {
        // 创建box
        let box = BABYLON.Mesh.CreateBox("box", 1, this._scene);
        // 地面
        let ground = BABYLON.Mesh.CreatePlane('plane', 30, this._scene);
        ground.position = new BABYLON.Vector3(0, -10, 0);
        ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);
        let groundmat = new BABYLON.StandardMaterial('groundmat', this._scene);
        groundmat.diffuseColor = new BABYLON.Color3(0.3, 0.3, 1);
        groundmat.backFaceCulling = false;
        ground.material = groundmat;
        // 粒子场景
        let system = new BABYLON.ParticleSystem('particlesys', 3000, this._scene); // 3000 最大粒子存在数
        system.particleTexture = new BABYLON.Texture('images/flare.png', this._scene); //粒子纹理
        // system.targetStopDuration = 5; // 存在时间 （秒）
        // system.disposeOnStop = true; // 停止后即刻销毁
        system.preWarmStepOffset = 5; // 预启动 - 速度/正常速度
        system.preWarmCycles = 100; // 预启动 - 预启动执行的帧数
        // 粒子发射器
        system.emitter = box;
        system.minEmitBox = new BABYLON.Vector3(-1, 0, 0);
        system.maxEmitBox = new BABYLON.Vector3(1, 0, 0);
        // 粒子配置
        system.color1 = new BABYLON.Color4(0.7, 0.8, 1, 1); //颜色
        system.color2 = new BABYLON.Color4(0.2, 0.5, 1, 1);
        system.colorDead = new BABYLON.Color4(0, 0, 0.2, 0);
        system.minSize = 0.1; // 粒子大小
        system.maxSize = 0.5;
        system.emitRate = 1500; // 发射速率
        system.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE; //混合模式 BLENDMODE_ONEONE, or BLENDMODE_STANDARD
        system.gravity = new BABYLON.Vector3(0, -9.81, 0);
        system.direction1 = new BABYLON.Vector3(-5, 8, 3);
        system.direction2 = new BABYLON.Vector3(5, 8, -3);
        system.minAngularSpeed = 0; // 最小角速率
        system.maxAngularSpeed = Math.PI; // 最大角速率
        system.minEmitPower = 1; // 最小发射速率
        system.maxEmitPower = 3; // 最大发射速率
        system.updateSpeed = 0.005;
        system.start();
        // 动画
        let keyFrames: any[] = [];
        keyFrames.push({ frame: 0, value: 0 });
        keyFrames.push({ frame: 50, value: Math.PI });
        keyFrames.push({ frame: 100, value: 0 });
        let animation = new BABYLON.Animation('animation', 'rotation.x', 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        animation.setKeys(keyFrames);
        box.animations.push(animation);
        this._scene.beginAnimation(box, 0, 100, true);
    }

    async animationExecution(animatable) {
        console.log('begin ... ');
        await animatable.waitAsync();
        console.log('after ...')
    }

    doRender(): void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });

        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
}